import { Block, View, Image, Text, Icon } from '@tarojs/components'
import Taro from '@tarojs/taro'
import withWeapp from '@tarojs/with-weapp'
import './index.scss'
const app = Taro.getApp()

@withWeapp('Page')
class _C extends Taro.Component {
  state = {
    tabs: ['推荐文章'],
    //, "关注","问答"
    activeIndex: 0,
    //推荐集合数据
    list1: [],
    //当前页数
    loadMore: true
  }
  componentWillMount = async () => {
    console.log('index')
  }
  componentDidShow = async () => {
  }
  go2EditArticle = () => {
    Taro.navigateTo({
      url: '/pages/edit-article/edit-article'
    })
  }
  go2ArticleDetail = e => {
    const id = e.currentTarget.dataset.value
    Taro.navigateTo({
      url: `/pages/article-detail/article-detail?articleId=${id}`
    })
  }
  go2UserHome = async e => {
    const userId = e.currentTarget.dataset.userid
    Taro.navigateTo({
      url: `/pages/user-home/user-home?userId=${userId}`
    })
  }
  config = {
    navigationBarTitleText: '专业知识分享'
  }

  render() {
    const { tabs, activeIndex, list1, loadMore } = this.state
    return (
      <Block>
        <View
          className="container"
        >
          <View className="sel-tab">
            <View className="sel-navbar">
              {tabs.map((item, index) => {
                return (
                  <Block key="*this">
                    <View
                      data-index={index}
                      className="navbar-item"
                      onClick={this.tabClick}
                    >
                      <View
                        className={
                          'navbar-title ' +
                          (activeIndex == index ? 'item-on' : '')
                        }
                      >
                        {item}
                      </View>
                    </View>
                  </Block>
                )
              })}
            </View>
          </View>
          {/*  分享内容-关注  */}
          <View className="follow-main" hidden={activeIndex != 0}>
            {list1.map((item, index) => {
              return (
                <Bolck key={item}>
                  <View className="share-item">
                    <View className="item-top">
                      <Image
                        src={item.avatarUrl}
                        onClick={this.go2UserHome}
                        data-userid={item.userId}
                      ></Image>
                      <View className="item-top-name">
                        <Text>{item.nickName}</Text>
                        <Text>{item.time}</Text>
                      </View>
                      {!item.isLike && (
                        <View
                          className="follow"
                          onClick={this.likeing}
                          data-index={index}
                          data-value={item.id}
                        >
                          点赞
                        </View>
                      )}
                      {item.isLike && (
                        <View
                          className="follow followed"
                          onClick={this.cancelLikeing}
                          data-index={index}
                          data-value={item.id}
                        >
                          取消点赞
                        </View>
                      )}
                      {/*  <view class='follow' bindtap='following' data-value='{{index}}' data-userid='{{item.userId}}' wx:if='{{!item.isFollowed}}'>+ 关注</view>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <view class='follow followed' wx:if='{{item.isFollowed}}'>已关注</view>  */}
                    </View>
                    <View
                      className="item-con"
                      onClick={this.go2ArticleDetail}
                      data-value={item.id}
                    >
                      <Text className="item-con-title">
                        {'# ' + item.title}
                      </Text>
                      <View className="item-con-til">
                        <Text className="tag tag-type">{item.type}</Text>
                        <Text
                          className="tag tag-major"
                          hidden={item.majorTag == undefined}
                        >
                          {item.majorTag}
                        </Text>
                        {item.tags.map((item, index) => {
                          return (
                            <Text className="tag" key={item}>
                              {item}
                            </Text>
                          )
                        })}
                      </View>
                      <View className="item-con-detail">
                        <Text>{item.content}</Text>
                        <View className="detail-imgs">
                          {item.imgs.map((item, index) => {
                            return (
                              <Image
                                src={item}
                                key={item}
                                mode="aspectFill"
                              ></Image>
                            )
                          })}
                        </View>
                      </View>
                    </View>
                  </View>
                </Bolck>
              )
            })}
          </View>
          {/*  加载更多  */}
          <View
            className="load-more"
            hidden={!loadMore}
            onClick={this.loadMore}
          >
            加载更多
          </View>
        </View>
        {/*  发布按钮  */}
        <View className="share-btn" onClick={this.go2EditArticle}>
          <Icon className="iconfont spk-fabu"></Icon>
        </View>
      </Block>
    )
  }
}

export default _C
